import 'package:flutter/material.dart';
import 'package:flutter_app/views/Repayment/razorpay.dart';
import 'package:flutter_app/views/Loan/list.dart';
import 'package:flutter_app/views/Help/help.dart';
import 'package:flutter_app/views/repayment/repayment_bills.dart';

class Repayment extends StatefulWidget {
  @override
  _RepaymentState createState() => _RepaymentState();
}

class _RepaymentState extends State<Repayment> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _renderAppBar(),
        backgroundColor: Colors.grey[100],
        body: Stack(
          children: <Widget>[
            ListView(
              padding: EdgeInsets.all(16),
              children: <Widget>[
                _renderTopAmountCard(),
                Container(
                  margin: EdgeInsets.only(bottom: 200),
                  child: RepaymentBills(),
                )
              ],
            ),
            _renderRepayButton(),
          ],
        ));
  }

  AppBar _renderAppBar() {
    return AppBar(
      centerTitle: false,
      title: Text('Repayment'),
      elevation: 0,
      // backgroundColor: Colors.transparent,
      actions: <Widget>[
        IconButton(
          icon: Icon(Icons.library_books),
          onPressed: viewLoanList,
        ),
        IconButton(
          icon: Icon(Icons.help),
          onPressed: viewHelpPage,
        ),
      ],
    );
  }

  Widget _renderTopAmountCard() {
    return Container(
      height: 145,
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage("assets/images/repayment_bg.png"),
          fit: BoxFit.none,
        ),
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Text(
            'Amount due',
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
          Text(
            '₹ 3,450',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Loan Details',
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
              Icon(Icons.chevron_right, color: Colors.white)
            ],
          )
        ],
      ),
    );
  }

  Widget _renderRepayButton() {
    return Positioned(
      bottom: 0,
      child: Container(
        height: 50,
        width: MediaQuery.of(context).size.width,
        color: Colors.white,
        padding: EdgeInsets.only(left: 16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            RichText(
              text: TextSpan(
                text: 'Total amount:',
                style: TextStyle(color: Color(0xFF999999), fontSize: 14),
                children: <TextSpan>[
                  TextSpan(
                      text: '₹ 3,530.23',
                      style: TextStyle(
                        fontSize: 16,
                        color: Color(0xFF101010),
                        fontWeight: FontWeight.bold,
                      )),
                ],
              ),
            ),
            Container(
              width: 140,
              child: RazorpayComp(),
            )
          ],
        ),
      ),
    );
  }

  Future viewHelpPage() async {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (BuildContext context) {
      return HelpCenter();
    }));
  }

  Future viewLoanList() async {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (BuildContext context) {
      return LoanList();
    }));
  }
}
